<template>
  <div class="shiftarrangementseasy">
    <div class="header">
      <h2>线路技术科应急响应排班</h2>
      <div class="button-group">
        <a-button type="primary" @click="startEditing" :disabled="isEditing">
          {{ isEditing ? '编辑中...' : '开始排班' }}
        </a-button>
        <a-button
          v-if="isEditing"
          type="primary"
          preIcon="ant-design:save-outlined"
          @click="saveSchedule"
          style="background-color: #00bb00"
        >
          保存排班
        </a-button>
      </div>
    </div>
    <div class="calendar-container">
      <!-- <a-calendar v-model:value="value" @panelChange="onPanelChange" /> -->
      <a-calendar
        v-model:value="value"
        :fullscreen="false"
        @panelChange="onPanelChange"
        @select="handleSelect"
        :style="{ height: '500px', border: '1px solid #f0f0f0', borderRadius: '8px' }"
      >
        <template #headerRender="{ value: current, type, onChange, onTypeChange }">
          <div style="padding: 10px">
            <a-row type="flex" justify="space-between">
              <a-col>
                <a-select
                  size="small"
                  :dropdown-match-select-width="false"
                  class="my-year-select"
                  :value="String(current.year())"
                  @change="
                    (newYear) => {
                      onChange(current.year(+newYear))
                    }
                  "
                >
                  <a-select-option
                    v-for="val in getYears(current)"
                    :key="String(val)"
                    class="year-item"
                  >
                    {{ val }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col> {{ current.year() }} 年 {{ current.month() + 1 }} 月 </a-col>
              <a-col>
                <a-select
                  size="small"
                  :dropdown-match-select-width="false"
                  :value="String(current.month())"
                  @change="
                    (selectedMonth) => {
                      onChange(current.month(parseInt(String(selectedMonth), 10)))
                    }
                  "
                >
                  <a-select-option
                    v-for="(val, index) in getMonths(current)"
                    :key="String(index)"
                    class="month-item"
                  >
                    {{ val }}
                  </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </div>
        </template>
        <template #dateCellRender="{ current }">
          <!-- 今天以前的时间不管已派还是未排标签颜色都显示灰色,当天需要正常显示 -->
          <div v-if="current.isBefore(new Date())" style="font-size: 10px">查排班</div>
          <div v-else-if="isScheduled(current)" class="scheduled-tag">已排班</div>
          <div v-else class="unscheduled-tag">未排班</div>
        </template>
      </a-calendar>
    </div>
    <a-drawer
      title="开始排班"
      placement="bottom"
      size="60%"
      :open="showStaffSelector"
      @close="showStaffSelector = false"
    >
      <div class="staff-selector">
        <!-- 显示allstaff的人员列表 -->
        <div v-for="staff in allStaff" :key="staff.id" class="staff-item">
          <a-checkbox :checked="staff.selected" @change="staff.selected = $event">
            {{ staff.name }} ({{ staff.position }})
          </a-checkbox>
        </div>
      </div>
    </a-drawer>
    <a-drawer
      title="已排班人员"
      placement="bottom"
      size="60%"
      :open="showStaffView"
      @close="showStaffView = false"
    >
      <div class="staff-view">已排班人员</div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { Dayjs } from 'dayjs'
// 响应式数据
const currentDate = ref(new Date())
const value = ref<Dayjs>()
// 排班状态
const isEditing = ref(false)
const showStaffSelector = ref(false)
const showStaffView = ref(false)
const selectedDay = ref<{ date: number; staff: Staff[] }>()
interface Staff {
  id: string
  name: string
  position: string
  selected?: boolean
}

const onPanelChange = (value: Dayjs, mode: string) => {
  console.log(value, mode)
}

const getMonths = (value: Dayjs) => {
  const localeData = value.localeData()
  const months = []
  for (let i = 0; i < 12; i++) {
    months.push(localeData.monthsShort(value.month(i)))
  }
  return months
}

const getYears = (value: Dayjs) => {
  const year = value.year()
  const years = []
  for (let i = year - 10; i < year + 10; i += 1) {
    years.push(i)
  }
  return years
}
// 模拟人员数据
const allStaff = ref<Staff[]>([
  { id: '1', name: '张三', position: '供电专业' },
  { id: '2', name: '李四', position: '电务专业' },
  { id: '3', name: '王五', position: '工务专业' },
  { id: '4', name: '赵六', position: '电务专业' },
  { id: '5', name: '钱七', position: '供电专业' },
])
// 检查日期是否已排班
const isScheduled = (date: Date) => {
  // 模拟数据：今天和未来几天已排班
  // console.log(date.getDate())
  // 基于Vant日历组件的实际返回格式处理
  let selectedDate: Date | null = null
  selectedDate = new Date(date)
  console.log('1111', selectedDate)
  //单数排班双数未排班
  if (selectedDate.getDate() % 2 === 0) {
    return false
  }
  // 所有日期设置成已排班
  return true
}
// 处理日期点击
const handleSelect = (day: any) => {
  console.log('点击的日期:', day)
  // 检查日期是否小于当前时间

  // 基于Vant日历组件的实际返回格式处理
  let selectedDate: Date | null = null

  // 检查是否有日期相关的属性
  if (day.date) {
    selectedDate = new Date(day.date)
  }
  // 根据编辑状态打开相应的弹窗
  if (isEditing.value) {
    showStaffSelector.value = true
  } else {
    showStaffView.value = true
    showStaffSelector.value = false
  }
}
// 处理禁用日期点击，禁用的日期点击之后只显示已排班的消息
const handledisabledSelect = (day: any) => {
  // showToast('该日期已排班')
  // showtoast唤醒屏幕弹出消息
  showStaffView.value = true
  showStaffSelector.value = false
}
const startEditing = () => {
  isEditing.value = true
}
const saveSchedule = () => {
  isEditing.value = false
  message.success('排班已保存')
}

// 检查人员是否已选中
const isStaffSelected = (staffId: string): boolean => {
  return selectedDay.value?.staff.some((s) => s.id === staffId) || false
}

// 切换人员选中状态
const toggleStaffSelection = (staff: Staff) => {
  staff.selected = !staff.selected
}
</script>

<style scoped>
.shiftarrangementseasy {
  padding: 10px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5px 0;
}

.header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  /* margin: 0 0 10px 0; */
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header .button-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.calendar-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  /* margin-top: 10px; */
}

/* 排班标签样式 */
.scheduled-tag {
  background-color: #74d643;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  text-align: center;
}
/* 排班标签样式 */
.unscheduled-tag {
  background-color: #ec8859;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  text-align: center;
}
/* 抽屉内容样式 */
.staff-selector,
.staff-view {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

/* 人员选择项样式 */
.staff-item {
  margin-bottom: 15px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.staff-item:hover {
  background-color: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 美化复选框样式 */
.staff-item :deep(.ant-checkbox-wrapper) {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.staff-item :deep(.ant-checkbox) {
  margin-right: 10px;
  transform: scale(1.2);
}

.staff-item :deep(.ant-checkbox-inner) {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border-color: #d9d9d9;
  transition: all 0.3s ease;
}

.staff-item :deep(.ant-checkbox-checked .ant-checkbox-inner) {
  background-color: #1677ff;
  border-color: #1677ff;
  border-radius: 4px;
}

.staff-item :deep(.ant-checkbox-inner:after) {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: 2px solid white;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.staff-item :deep(.ant-checkbox:hover .ant-checkbox-inner) {
  border-color: #1677ff;
}

/* 人员职位样式 */
.staff-item :deep(.ant-checkbox-wrapper span:last-child) {
  font-size: 14px;
}

.staff-item :deep(.ant-checkbox-wrapper span:last-child) {
  color: #666;
}

.staff-item :deep(.ant-checkbox-wrapper span:last-child) {
  font-weight: 400;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .shiftarrangementseasy {
    padding: 10px;
  }

  .calendar-container {
    padding: 10px;
  }

  .scheduled-tag {
    font-size: 10px;
    padding: 1px 4px;
  }
  .unscheduled-tag {
    font-size: 10px;
    padding: 1px 4px;
  }
}
</style>
